<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>海数云</title>
    <link rel="stylesheet" href="static/plugs/bootstrap/bootstrap.min.css">
    <!--    <link rel="stylesheet" href="static/css/base.css">-->
    <link rel="stylesheet" href="static/css/normalize.css">
    <script src="static/plugs/jquery/jquery-3.1.1.min.js"></script>
    <script src="static/plugs/bootstrap/jquery.slim.min.js"></script>
    <script src="static/plugs/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="initial.js"></script>
    <style>
        .wrap{
            width: 1440px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .search-header{
            width: 1440px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*border: 1px red solid;*/
            .search-title-wrap{
                display: flex;
                justify-content: center;
                align-items: center;
                .search-title-icon{
                    width: 48px;
                    height: 48px;
                    background: url("static/images/logo.png") 100% 100%;
                    background-size: contain;
                    margin-right: 20px;
                }
                .search-title a{
                    color:darkmagenta;
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .search-input-wrap{
                width: 650px;
                height: 80px;
                display: flex;
                align-items: center;
                /*background: grey;*/
            }
            .search-input-wrap input{
                width: 650px;
                height: 60px;
                padding-left: 30px;
                border-radius: 40px;
                border:0.1pt solid rgba(220, 220, 220, 0.8);
            }
            .user-wrap{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .msg-wrap{
                    margin-right: 20px;
                    display: flex;
                    flex-direction: row;
                }
                .msg-icon{
                    width: 24px;
                    height: 24px;
                    margin-right: 5px;
                    background: url("static/images/bell2.png") 100% 100%;
                    background-size: contain;
                }
                .user-img img{
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                }
                .search-action{
                    /*border: 1px red solid;*/
                    width: 100px;
                    height: 40px;
                    margin-left: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 20px;
                    padding: 2px 10px;
                    background: #bfcdda;
                    color:#ffffff;
                    font-size: 18px;
                    font-weight: 400;
                }
            }
        }
        .search-tip{
            width: 1200px;
            margin: 20px 0 50px 0;
        }
        .result-wrap{
            width: 1200px;
            margin-bottom: 100px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .data{
                width: 280px;
                height: 280px;
                margin-right: 10px;
                margin-bottom: 10px;
                background: grey;
            }
        }

        /*footer布局*/
        .footer{
            width: 1440px;
            height: 60px;
            background: #cccccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .outer-link{
                display: flex;
                justify-content: space-around;
            }
        }
        .outer-link div a{
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="search-header">
            <div class="search-title-wrap">
                <div class="search-title-icon"></div>
                <div class="search-title"><a href="index.php">haishuyun</a></div>
            </div>
            <div class="search-input-wrap">
                <input class="search-input" placeholder="请输入查询内容...">
                <div class="search-icon"></div>
            </div>
            <div class="user-wrap">
                <div class="msg-wrap">
                    <div class="msg-icon"></div>
                    <div class="msg">消息</div>
                </div>
                <div class="user-img">
                    <img src="static/images/thumb.png" alt="暂无头像" onclick="toUser()">
                </div>
                <div class="search-action">
                    <div>创作</div>
                </div>
            </div>
        </div>
        <div class="search-tip">已查找到12条相关信息</div>
        <div class="result-wrap">
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
        </div>
        <div class="footer">
            <div class="copyright">Copyright © 2023 海数云 版权所有 渝ICP备2022012388号</div>
            <div class="outer-link">
                <div><a href="">用户协议</a></div>
                <div><a href="">隐私政策</a></div>
                <div><a href="">媒体合作</a></div>
                <div><a href="">广告合作</a></div>
                <div><a href="">友情链接</a></div>
                <div><a href="">反馈建议</a></div>
            </div>
        </div>
    </div>
</body>
<script>
    function toUser(){
        window.location.href="user-center/index.php";
    }
</script>
</html>